<template>
	<el-upload
		:action="isToLocal?uploadLocalUrl:uploadReqUrl"
		list-type="text"
		:auto-upload="true"
		:headers="uploadHeader"
		:limit="limitNum"
		:file-list="imageList"
		ref="imageRef"
		:disabled="false"
		:on-remove="removeImage"
		:on-success="uploadSuccess"
		:on-progress="onProgress"
		:on-error="onError"
		:before-upload="beforeLoad"
		accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
		:class="['upload-box',{ imgHide: imageHideUpLoad }]"
		>
		<el-button size="small" type="primary">点击上传</el-button>
		<div class="upload-process sn-flex sn-col-center sn-row-center" v-if="progressShow&&showProcess">
			<el-progress type="circle" :text-inside="true" :stroke-width="16" :percentage="percentage"></el-progress>
		</div>
	</el-upload>
</template>

<script>
import {imageUrl,uploadReqUrl,uploadLocalUrl} from '@/settings'
import { getToken, getTokenType} from '@/utils/auth'
import {guid} from '@/utils/index'
export default {
data(){
	return{
		uploadReqUrl: uploadReqUrl,
		uploadLocalUrl:uploadLocalUrl,
		imageUrl:imageUrl,
		imageList:[],
		uploadSuccessId:null,
		uploadSuccessIdList:[],
		uploadHeader:{
			  'Authorization':getTokenType() + ' ' + getToken(),
		},
		percentage: 0,
		progressShow:false,
	}
},
props: {
	// 上传的数量限制
	limitNum:{
		type:Number,
		default:1
	},
	// 是否最多传一个
	initOne:{
		type:String,
		default:''
	},
	// 是否隐藏图片
	isHeadImg:{
		type:Boolean,
		default:false
	},
	isBanner: {
		type:Boolean,
		default:false
	},
	// 是否是上传的身份证照片
	isIdcard:{
		type:Boolean,
		default:false
	},
	// 上传到本地不是CDN
	isToLocal: {
		type:Boolean,
		default:false
	},
	// 是否展示上传进度条
	showProcess: {
		type:Boolean,
		default:false
	},
	initData: {
		type: Array,
		default: () => {
			return [];
		}
	},
	isIncludeUrl: {
		type:Boolean,
		default:false
	}
},
computed:{
	imageHideUpLoad() {
		return this.imageList.length >= this.limitNum;
	},
},
created() {
	
},
mounted() { 
	
},
methods: {
	previewFn(file) {
		this.$emit('previewImage', file.url);
	},
	onProgress(process) {
		this.progressShow = true;
		this.percentage = Number(process.percent.toFixed(0));
	},
	onError() {
		this.progressShow = false;
		this.$message.error('上传失败');
	},
	 //上传图片
	uploadSuccess: function (response, file, fileList) {
		this.progressShow = false;
		if(response.code == 200){
			this.imageList.push(file);
			if (this.limitNum == 1) {
				if (this.isBanner||this.isIncludeUrl) {
					this.uploadSuccessId = response.data[0].id;
				} else {
					this.uploadSuccessId = response.data[0].id;
				}
				this.$emit('imageUpload', { local: this.uploadSuccessId, url:response.data[0].url});
			} else {
				if (this.isIncludeUrl) {
					this.uploadSuccessIdList.push({
						id: response.data[0].id,
						url:response.data[0].url
					});
				} else {
					this.uploadSuccessIdList.push(response.data[0].id);
				}
				this.$emit('imageUpload',{local:this.uploadSuccessIdList,currentId:response.data[0].id});
				// this.$emit('imageRemove',{local:JSON.stringify(this.uploadSuccessIdList),copy:JSON.stringify(this.uploadWxSuccessIdList)});
			}
		}else{
			let fileList = this.$refs.imageRef.uploadFiles;
			let index = fileList.findIndex((item) => item.uid === file.uid);
			this.imageList.splice(index, 1);
			this.$message.error('上传文件失败，错误信息：'+response.erroMessage)
		}
	},
	removeImage(file) {
		let fileList = this.$refs.imageRef.uploadFiles;
		let index = fileList.findIndex((item) => item.uid === file.uid);
		fileList.splice(index, 1);
		if(this.limitNum == 1){
			this.uploadSuccessId = null;
			this.imageList.splice(index, 1);
			this.$emit('imageRemove');
		}else{
			this.uploadSuccessIdList.splice(index, 1);
			this.imageList.splice(index, 1);
			this.$emit('imageRemove',{local:this.uploadSuccessIdList,currentIndex:index});
		}
	
	},
	beforeLoad(file){
		const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
		const whiteList = ['xls','xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','application/vnd.ms-excel'];
		if (whiteList.indexOf(fileSuffix) === -1) {
			this.$message.error('上传文件只能是 xls,xlsx格式的');
			return false;
		}
		const isLt5M = file.size / 1024 / 1024  < 20;
		if (!isLt5M) {
			this.$message.error('上传文件大小不能超过 20MB');
			return false;
		}
	},
}
}
</script>

<style lang='scss'>
.imgHide{
.el-upload--picture-card{
	display: none !important;
}
.el-form-item__content{
	// display: none !important;
	line-height: 0;

}
}
.idcard{
.el-upload--picture-card{
	width: 306px;
	height: 124px;
	line-height: 10px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
}
.el-upload-list--picture-card .el-upload-list__item{
		width: 306px;
	height: 124px;
	line-height: 124px;
	display: block;
	margin: 0 auto;
	>div{
		height: 100%;
	}
}
.el-upload--picture-card:hover, .el-upload:focus {
	border-color: #ff551a;
	color: #ff551a;
}
}
.bgc{
.el-upload--picture-card{
	background-color: #eeeeee;
	border: 1px solid #eeeeee;
}
.el-upload--picture-card:hover, .el-upload:focus {
	border-color: #eeeeee;
	color: #eeeeee;
}
}
.template-upload{
.el-upload{
	position: relative;
	.upload-process{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}
}

</style>